<template>
  <div class="consultDetail">
    <el-dialog title="会商会审详情" class="dialog" :visible="detailVisible" width="30%" @close="handleClose">
      <div class="firstRow pa-flex">
        <div>
          <div class="title">开始时间</div>
          <div class="content">{{ consultDetail.startTime }}</div>
        </div>
        <div>
          <div class="title">结束时间</div>
          <div class="content">{{ consultDetail.endTime }}</div>
        </div>
      </div>
      <div class="secondRow">
        <div class="title common">发起原因</div>
        <div class="content">{{ consultDetail.reason }}</div>
      </div>
      <div>
        <div class="title common">会议纪要</div>
        <div class="content">{{ consultDetail.content }}</div>
      </div>
        <div>
            <div class="title common">附件</div>
            <div class="content">
                <div class="f-r a-c f-w" style="width: 100%">
                    <div
                        style="position:relative;margin-right: 20px;margin-top: 20px"
                        v-for="(file,index) in commonFileList" :key="index">
                        <FileView2  :file="file" />
                    </div>
                </div>
                <div class="f-r a-c f-w" style="width: 100%">
                    <div
                        style="position:relative;margin-right: 20px;margin-top: 20px"
                        v-for="(file,index) in imageFileList"
                        :key="index"
                    >
                        <el-image
                            style="width: 100px;height: 80px"
                            :src="file.fileUrl"
                        />
                  </span>
                    </div>
                </div>
            </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getConsultDetailApi } from '@/api/manageApi.js'
import FileView2 from '@/components/FileView2'
export default {
  components: {
        FileView2
    },
  props: {
    detailVisible: {
      type: Boolean,
      default: false
    },
    detailId: {
      type: String,
      default: ''
    }
  },
    data() {
      return {
          consultDetail: {},
          fileList: []
      }
    },
  watch: {
    detailVisible(val) {
      if (val) {
        this.getConsultDetail()
      }
    }
  },
    computed: {
        commonFileList() {
            return this.fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) === -1)
        },
        imageFileList() {
            return this.fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) > -1)
        }
    },
  methods: {
    handleClose() {
      this.$emit('update:detailVisible', false)
    },
    getConsultDetail() {
      getConsultDetailApi({
        id: this.detailId
      }).then(res => {
          this.fileList = []
        if (res.code == 0) {
            if (res.data.file && typeof res.data.file === 'string' && res.data.file.includes('{')) {
                this.fileList = JSON.parse(res.data.file)
                console.log(this.fileList);
            }
          this.consultDetail = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.consultDetail {
  ::v-deep .el-dialog {
    width: 740px !important;
  }
  .firstRow {
    div {
      &:first-child {
        margin-right: 120px;
      }
    }
  }
  .title {
    font-weight: 500;
    color: #333333;
    margin-bottom: 27px;
  }
  .content {
    color: #333333;
  }
  .common {
    margin-top: 60px;
  }
  .sure {
    background: #4880ff;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
